<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <!-- 引入bootstrap.css  ctrl+/ -->
  <link rel="stylesheet" href="/boot/plugins/bootstrap/css/bootstrap.css">
  <style>
    #nav_img{
      width: 50px;
      height: 50px;
      border-radius: 50%;
      padding: 2px;
    }

  </style>
</head>
<body>
<!-- 导航begin -->
<div class="container-fluid">
  <div class="row">
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <div class="navbar-header">
            <a href="../index.html"><img src="/boot/imgs/logo.png"></a>
          </div>
          <ul class="nav navbar-nav">
            <li><a href="../index.html">首页</a></li>
            <li><a href="indexn.html">男鞋</a></li>
            <li><a href="indexv.html">女鞋</a></li>
          </ul>
        </div>
        <div class="collapse navbar-collapse" id="example-navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active logins"><a href="#"></a></li>
            <li class="no_login login_in"><a href="login.html" data-toggle="modal" data-target="#myModal">登录</a></li>
            <li class="no_login"><a href="#">注册</a></li>
            <li class="logins"><a href="#">我的订单</a></li>
            <li class="logins"><a href="car.html">我的购物车 <span class="glyphicon glyphicon-shopping-cart"></span></a></li>
            <li class="logins login_out"><a href="#">安全退出</a></li>
            <li class="logins"><img style="" id="nav_img" src="../../imgs/tx.jpg"></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</div>
<!-- 导航end  ctrl+/ -->
<!--表格begin-->
<div class="container">
  <div class="col-md-offset-1 col-md-10">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <p class="panel-title"><span class="fa fa-shopping-cart"></span> 购物车</p>
      </div>
      <div class="panel-body">
        <form action="" role="form">
          <!--购物车表格开始-->
          <table class="cart-table" width="100%">
            <thead>
            <tr>
              <th width="8%">
                <input type="checkbox" class="ckall" onclick="checkall(this)"/>全选
              </th>
              <th width="110"></th>
              <th width="29%">商品</th>
              <th width="11%">单价</th>
              <th width="15%">数量</th>
              <th width="11%">金额</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody id="cart-list" class="cart-body">
            <tr>
              <td>
                <input type="checkbox" class="ckitem"/>
              </td>
              <td><img src="../../imgs/NV2.png" class="img-responsive"/>
              </td>
              <td>女大童休闲鞋YKCS086-72</td>
              <td>¥<span id="goodsPrice1">168.00</span></td>
              <td>
                <input type="button" value="-" class="num-btn" onclick="reduceNum(1)"/>
                <input id="goodsCount1" type="text" size="2" readonly="readonly" class="num-text"
                       value="1">
                <input class="num-btn" type="button" value="+" onclick="addNum(1)"/>
              </td>
              <td><span id="goodsCast1">168</span></td>
              <td>
                <input type="button" onclick="delCartItem(this)" class="cart-del btn btn-default btn-xs"
                       value="删除"/>
              </td>
            </tr>
            </tbody>
          </table>
          <div>
								<span class="pull-right">
								<input type="submit" value="  结  算  " class="btn btn-primary btn-lg link-account"/>
							</span>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!--表格end-->









<!-- 因为bootstrap依赖于jquery,必须先引入jquery -->
<script src="/boot/plugins/jquery/jquery.min.js"></script>
<!-- 引入bootstrap.js -->
<script src="/boot/plugins/bootstrap/js/bootstrap.js"></script>

<script>

  /*按加号数量增*/
  function addNum(rid) {
    var n = parseInt($("#goodsCount"+rid).val());
    $("#goodsCount"+rid).val(n + 1);
    calcRow(rid);
  }
  /*按减号数量减*/
  function reduceNum(rid) {
    var n = parseInt($("#goodsCount"+rid).val());
    if (n == 0)
      return;
    $("#goodsCount"+rid).val(n - 1);
    calcRow(rid);
  }
  /*全选全不选*/
  function checkall(ckbtn) {
    $(".ckitem").prop("checked", $(ckbtn).prop("checked"));
    //calcTotal();
  }
  //删除按钮
  function delCartItem(btn) {

    $(btn).parents("tr").remove();
    //calcTotal();
  }
  //批量删除按钮
  function selDelCart() {
    //遍历所有按钮
    for (var i = $(".ckitem").length - 1; i >= 0; i--) {
      //如果选中
      if ($(".ckitem")[i].checked) {
        //删除
        $($(".ckitem")[i]).parents("tr").remove();
      }
    }
    //calcTotal();
  }
  $(function() {
    //单选一个也得算价格
    $(".ckitem").click(function() {
      calcTotal();
    })
    //开始时计算价格
    //   calcTotal();
  })
  //计算单行小计价格的方法
  function calcRow(rid) {
    //取单价
    var vprice = parseFloat($("#goodsPrice"+rid).html());
    //取数量
    var vnum = parseFloat($("#goodsCount"+rid).val());
    //小计金额
    var vtotal = vprice * vnum;
    //赋值
    $("#goodsCast"+rid).html("¥" + vtotal);
  }











  //检测本地存储uname - username
  $(function(){
    //从本地存储中去获取
    let uname = localStorage.getItem("uname")
    //未登录
    let lis = document.querySelectorAll(".no_login");
    //登录
    let lios = document.querySelectorAll(".logins");
    if(uname==null){
      for(let i=0;i<lis.length;i++){
        lis[i].style.display="";
      }

      for(let i=0;i<lios.length;i++){
        lios[i].style.display="none"
      }

    }else{

      for(let i=0;i<lis.length;i++){
        lis[i].style.display="none";
      }

      for(let i=0;i<lios.length;i++){
        if(i==0){
          lios[i].children[0].innerHTML=uname
        }
        lios[i].style.display=""
      }

    }
  })

  $(function(){
    $(".login_in").click(function(){
      window.location='/boot/views/users/login.html'
    })})
  $(function(){
    $(".login_out").click(function(){
      let uname = localStorage.getItem("uname");
      localStorage.clear();
      window.location = '/boot/views/users/login.html';
    })})

</script>
</body>
</html>